<template>
  <div class="hello">
    <div class="content" :currentIndex="currentIndex">
      <div @touchstart="touchstart"
          @touchmove="touchmove"
          @touchend="touchend"
          ref="swiper"
          :style="{left:left + 'px', width: swiperWidth + '%', 'transition-duration':  selfDuration + 'ms'}"
      class="swiper">
      <slot></slot>
      </div>
      <div class="dot">
        <div class="dot-item"
        :class="{active: currentIndex == index }"
        @click="currentIndex = index"
        v-for="(item, index) in childrenLength"
         :key="index" ></div>
      </div>
    </div>
  </div>
</template>

<script>
 /* eslint-disable */
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    duration: {
      type: Number,
      default: 300
    },
    interval: {
      type: Number,
      default: 3000
    }
  },
  data () {
    return {
      startX: 0,
      endX:0,
      shiftX: 0,
      left: 0,
      swiperWidth: 0,
      currentIndex: 0,
      childrenLength:0,
      swiperItemWidthPX:0,
      swiperIng: false,
      swiper:this.$refs.swiper
    }
  },
  computed : {
    selfDuration () {
      if(this.swiperIng) {
        return 0
      }else{
        return this.duration
      }
    },
    // childrenLength () {
    //   return this.$refs.swiper.childNodes.length
    // }
  },
  watch: {
    currentIndex (val) {
      //监听当前index 设置left
      this.left = - (val * this.swiperItemWidthPX)
      //保存left
      this.shiftX = this.left
      console.log('watch', this.left, this.shiftX)
    },
    shiftX (val) {
      //监听left变化  切换index
      this.currentIndex = Math.abs(val/this.swiperItemWidthPX)
    },
  },
  mounted () {
    //获取子元素的宽度  等于每次位移的单位
    setTimeout(() => {
       console.log('setTimeout',Array.prototype.slice.call(this.$refs.swiper.childNodes))
       this.childrenLength = Array.prototype.slice.call(this.$refs.swiper.childNodes).length
       this.swiperWidth = this.childrenLength * 100;
    },100)
    this.$nextTick(() => {
      this.swiperItemWidthPX = document.querySelector('.content').getBoundingClientRect().width
      console.log('swiperItemWidthPX',this.swiperItemWidthPX)
      console.log(this.swiperWidth)
    })
  },
  methods: {
    //开始滑动
    touchstart (e) {
      // console.log(this.shiftX, this.left)
      //记录滑动开始接触点
      this.startX = e.changedTouches[0].clientX

      //取消过度动画时间
      this.swiperIng = true
    },
    //滑动中
    touchmove (e) {
      //处理滑动到边界时的情况
      if(this.left > 20 || this.left < -(this.swiperItemWidthPX * (this.childrenLength - 1) + 20)) {
        console.log(-(this.swiperItemWidthPX * (this.childrenLength - 1) + 20));
        return
      }
      const temp = e.changedTouches[0].clientX - this.startX;
      

      //滑动时实时反馈偏移量
      this.left = this.shiftX + temp
      console.log(this.shiftX,this.left,temp)
      
    },
    //滑动结束
    touchend (e) {
      //重新设置过度动画时间
      this.swiperIng = false

      //记录偏移量
      this.endX = e.changedTouches[0].clientX
      const temp = this.endX - this.startX
      // console.log(temp)

      //获取上次left的值
      this.left = this.shiftX



      //计算偏移量是否达到切换下一子元素的条件  偏移量为50px
      if(temp > 50) {//向右滑
        if(this.left === 0)return //处理边界情况
        this.left += this.swiperItemWidthPX //偏移一个单位
      }else if(temp < -50) {//向左滑
        if(this.left === (1 - this.childrenLength) * this.swiperItemWidthPX)return //处理边界情况
        this.left -= this.swiperItemWidthPX //偏移一个单位
      }
      this.shiftX = this.left //记录此次偏移后left的值
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
  /* width: 100%; */
  /* height: 300px; */
  /* overflow: scroll; */
  overflow: hidden;
  /* font-size: 0; */
}
.swiper {
  position: relative;
  transition-property: left; 
}


.dot {
  position: relative;
  width: 200px;
  margin-left: calc(50% - 100px);
  height: 20px;
  bottom: 40px;
  /* background: black; */
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.dot-item {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(192, 192, 192, 0.5);
}
.active {
  background: #FFF;
}
</style>
